<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>BTS Fan Space</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>BTS Fan Space 💜</h1>
    <p>欢迎来到你的个人BTS追星小天地</p>
  </header>

  <nav>
    <button onclick="showSection('qa')">🧠 知识问答</button>
    <button onclick="showSection('showcase')">🎤 专题展示</button>
    <button onclick="showSection('mood')">📝 每日心情</button>
    <button onclick="showSection('media')">🎵 音乐与视频</button>
  </nav>

  <main>
    <section id="qa" class="hidden">
      <h2>BTS 问答</h2>
      <div id="questionBox"></div>
      <button onclick="nextQuestion()">下一题</button>
    </section>

    <section id="showcase" class="hidden">
      <h2>成员专题展示</h2>
      <div id="showcaseBox"></div>
    </section>

    <section id="mood" class="hidden">
      <h2>每日心情记录</h2>
      <textarea id="moodInput" rows="5" placeholder="写下今天的追星心情吧~"></textarea>
      <button onclick="saveMood()">保存</button>
      <p id="savedMood"></p>
    </section>

    <section id="media" class="hidden">
      <h2>音乐与视频</h2>
      <audio controls>
        <source src="https://example.com/bts-song.mp3" type="audio/mpeg">
        您的浏览器不支持音频播放。
      </audio>
      <br>
      <video controls width="480">
        <source src="https://example.com/bts-video.mp4" type="video/mp4">
        您的浏览器不支持视频播放。
      </video>
    </section>
  </main>

  <footer>
    <p>Made with 💜 by ARMY</p>
  </footer>

  <script src="data.js"></script>
  <script src="script.js"></script>
</body>
</html>